<template>
  <div class="user_list">
    <img :src="userImg"
         alt="用户头像">
    <div class="username">用户名：{{ username }}</div>
    <template v-if="!editFlag">
      <div class="phone">手机号：{{ v_userPhone }}</div>
      <div class="mail">邮箱：{{ v_userMail }}</div>
      <div class="password">密码：{{ v_password }}</div>
      <div class="userStop">停用：{{ v_userStop }}</div>
      <div class="userAdmin">管理员：{{ v_userAdmin }}</div>
    </template>
    <template v-if="editFlag">
      <div class="phone">手机号：<input type="text"
               v-model="v_userPhone"></div>
      <div class="mail">邮箱：<input type="text"
               v-model="v_userMail"></div>
      <div class="password">密码：<input type="text"
               v-model="v_password"></div>
      <div class="userStop">停用：
        <select v-model="v_userStop">
          <option value="false">正常</option>
          <option value="true">停用</option>
        </select>
      </div>
      <div class="userAdmin">管理员：
        <select v-model="v_userAdmin">
          <option value="false">false</option>
          <option value="true">true</option>
        </select>
      </div>
    </template>
    <input type="button"
           value="修改信息"
           class="button"
           @click="edit"
           v-if="!editFlag">
    <input type="button"
           value="保存修改"
           class="button"
           @click="save"
           v-if="editFlag">
  </div>
</template>

<script>
export default {
  props: ['userImg', 'username', 'userPhone', 'userMail', 'password', 'userStop', 'userAdmin', '_id'],
  data () {
    return {
      v_userPhone: this.userPhone,
      v_userMail: this.userMail,
      v_password: this.password,
      v_userStop: this.userStop,
      v_userAdmin: this.userAdmin,
      editFlag: false
    }
  },
  methods: {
    edit () {
      this.editFlag = !this.editFlag;
    },
    save () {
      this.editFlag = !this.editFlag;
      let obj = {
        _id: this._id,
        userPhone: this.v_userPhone,
        userMail: this.v_userMail,
        password: this.v_password,
        userStop: this.v_userStop,
        userAdmin: this.v_userAdmin
      }
      this.$http.post('http://localhost:3000/admin/editUser', obj).then(response => {
        if (response.data.status == 1) {
          alert("更改失败", response.data.data);
        } else {
          alert("更改成功");
        }
      })
    }
  },
  watch: {
    userPhone () {
      // 监听userPhone的数据变化，防止获取不到值，出现undefined
      this.v_userPhone = this.userPhone;
      this.v_userMail = this.userMail;
      this.v_password = this.password;
      this.v_userStop = this.userStop;
      this.v_userAdmin = this.userAdmin;
    }
  }
}
</script>

<style lang="less" scoped>
.user_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 1090px;
  box-sizing: border-box;
  height: 120px;
  border: 1px solid pink;
  padding: 0 5px;
  margin: 5px;

  img {
    width: 50px;
    height: 50px;
    padding-right: 10px;
  }
  .username {
    width: 200px;
  }
  .phone {
    width: 200px;
  }
  .phone input {
    width: 120px;
  }
  .mail {
    width: 240px;
  }
  .mail input {
    width: 170px;
  }
  .password {
    width: 200px;
  }
  .password input {
    width: 140px;
  }
  .userStop {
    width: 120px;
  }
  .userAdmin {
    width: 140px;
  }
  .button {
    background-color: pink;
    border: none;
    border-radius: 5px;
    outline: none;
    padding: 5px;
    cursor: pointer;
  }
}
</style>